<!--
 * @Description:
 * @Author: zhaolei
 * @Date: 2023-04-12 12:12:42
-->
<template>
  <el-dialog
    title="添加签约信息"
    :visible.sync="visible"
    width="60%"
    append-to-body
  >
    <avue-form
      v-if="visible"
      ref="addForm"
      v-model="form"
      :option="tableOption"
    >
    </avue-form>
    <div class="flex-end">
      <el-button @click="visible = false">取消</el-button>
      <el-button
        class="btn"
        :loading="loading"
        type="primary"
        @click="confirm"
      >
        发起签约
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex';
import { tableOption } from '@/const/crud/pet/sign';
import { fetchBaseList } from '@/api/core/base';
import { getObj } from '@/api/core/pet-file';
import { addObj } from '@/api/core/agreement';
import { getPhoneList } from '@/api/core/agreement';
import { RESERVE_AGGREE } from '@/const/type';
export default {
  name: 'signPopup',
  props: {
    id: {
      type: [Object, String],
    },
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: {},
      loading: false,
      tableOption: tableOption(),
      treeData: [],
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
    ...mapGetters(['userInfo', 'access_token']),
  },
  watch: {
    visible(val) {
      if (val) {
        this.id && this.getDetail();
      } else {
        this.$refs.addForm && this.$refs.addForm.resetForm();
      }
    },
    'form.baseId': {
      immediate: true,
      async handler(val, oldVal) {
        if (val !== oldVal && val) {
          await this.init();
          const obj = this.treeData.find((el) => el.id === val);
          this.form.baseAddress = obj && obj.address;
        }
      },
    },
    'form.phone': {
      immediate: true,
      async handler(val) {
        if (val) {
          const res = await getPhoneList({ phone: val });
          const obj = res.data.data.find((el) => el.phone === val);
          this.form.userId = obj.userId;
          this.form.userNickName = obj.nickname;
          this.form.adoptName = obj.name;
          this.form.adoptCard = obj.idCard;
        } else {
          this.form.userId = '';
          this.form.userNickName = '';
        }
      },
    },
  },
  methods: {
    async getDetail() {
      const res = await getObj(this.id);
      const dataObj = { ...res.data.data };
      this.form = { ...dataObj };
    },
    async init() {
      const res = await fetchBaseList();
      this.treeData = res.data.data;
    },
    confirm() {
      this.$refs.addForm.validate(async (valid, done) => {
        if (valid) {
          this.loading = true;
          try {
            const params = {
              userId: this.form.userId,
              adoptAddress: this.form.baseAddress,
              type: RESERVE_AGGREE.ADOPT,
              agreementPetInfoBOList: [
                {
                  baseId: this.form.baseId,
                  petId: this.form.id,
                },
              ],
            };
            await addObj(params);
            this.$message.success('发起签约成功');
            this.$emit('success', true);
            done();
            this.loading = false;
            this.visible = false;
          } catch (error) {
            done();
            this.loading = false;
            throw new Error(error);
          }
        }
      });
    },
  },
};
</script>

<style lang='scss' scoped>
</style>
